<div ui-content-for="title">
  <span>Overlays</span>
</div>

<div class="scrollable">
  <div class="scrollable-content">
    <div class="section section-break">
      <a href="" 
          ui-turn-on="modal1"
          class="btn btn-default">Show Modal</a>
      <a href="" 
          ui-turn-on="modal2"
          class="btn btn-default">Show Overlay</a>
    </div>

    <div class="section section-break">
      <p>
        {{lorem}}
      </p>
    </div>
  </div>
</div>

<div ui-content-for="modals">

  <div class="modal" ui-if='modal1' ui-state='modal1'>
    <div class="modal-backdrop in"></div>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" 
                  ui-turn-off="modal1">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>{{lorem}}</p>
        </div>
        <div class="modal-footer">
          <button ui-turn-off="modal1" class="btn btn-default">Close</button>
          <button ui-turn-off="modal1" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>


    <div class="modal modal-overlay" ui-if='modal2' ui-state='modal2'>
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close"
                    ui-turn-off="modal2">&times;</button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>{{lorem}}</p>
          </div>
          <div class="modal-footer">
            <button ui-turn-off="modal2" class="btn btn-default">Close</button>
            <button ui-turn-off="modal2" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  
</div>
